<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style>
		textarea {
			width: 800px;
			height: 680px;
			border: "5px solid black";
		}
		log {
		    width: 800px;
		    height: 580px;
		    border: "5px solid black";
		}
	</style>
	<script src="md5/md5.min.js"></script>
</head>

<body>
    <h3>copy to cover "SOURCE_FILES.json"  <button onclick="copy()">copy</button></h3>
	<textarea id="textarea"></textarea>
    <h3>files is change</h3>
	<textarea id="log"></textarea>
	<script>
	    window.copy = function() {
	        navigator.clipboard.writeText(document.getElementById("textarea").value)
	            .then(() => document.getElementById("log").value += "\ncopied to clipboard")
	            .catch(e => alert(e.message || e.toString()))
	    }
	    
		document.body.onload = function() {
		try{
			let versionInfo;
			function createMD5(url) {
				return fetch(url + "?=cache=onlyNet")
					.then(response => response.ok ? response.arrayBuffer() : Promise.reject())
					.then(buffer => {
						const hash = md5.create();
						hash.update(buffer);
						return hash.hex();
					})
					.catch(() => Promise.reject(`fetch error: ${url}`))
			}
			
			fetch("Version/SOURCE_FILES_EDIT.json?cache=onlyNet")
				.then(response => response.ok ? response.json() : Promise.reject("fetch SOURCE_FILES_EDIT.json error"))
				.then(info => {
					const ps = [];
					versionInfo = info;
					versionInfo["md5"] = {};
					const keys = Object.keys(versionInfo.files);
					keys.map(key => ps.push(createMD5(versionInfo.files[key]).then(md5code => versionInfo["md5"][key] = md5code)))
					return Promise.all(ps);
				})
				.then(() => document.getElementById("textarea").value = JSON.stringify(versionInfo, null, 2))
				.then(() => fetch("Version/SOURCE_FILES.json?cache=onlyNet")
				    .then(response => response.ok ? response.json() : Promise.reject("fetch SOURCE_FILES.json error"))
				    .then(info => {
				        let logstr = "";
				        const keys = Object.keys(versionInfo.md5);
				        keys.map(key => versionInfo["md5"][key] != info["md5"][key] && (logstr += `${key}: ${info["files"][key]}\n`));
				        document.getElementById("log").value = logstr;
				    })
				)
				.catch(e => {
					alert(e && e.stack || e)
				})
			
		}catch(e){alert(e.stack)}
		}
	</script>
</body>

</html>